<template>
    <div class="pages">
        <van-sticky>
            <div class="header">
                <div class="fls" @click="$router.back(-1)">
                    <img src="../../../static/images/icon-back.png" alt="">
                </div>
                <div class="centern">账号实名</div>
                <div class="fls"></div>
            </div>
        </van-sticky>
        <div class="an_bady">
            <div class="icons">
                <img src="../../../static/images/icon-smrz.png" alt="">
            </div>

            <div class="titleibf">
                <img src="../../../static/images/icon-tips.png" alt="">
                <div>您的账号还未进行实名认证，请认证后继续</div>
            </div>

            <div class="daistliays">
                <div class="name">姓名</div>
                <div class="inpute">
                    <input type="text" v-model="name" name="" id="" placeholder="请输入身份证姓名">
                </div>
            </div>
            <div class="daistliays">
                <div class="name">身份证</div>
                <div class="inpute">
                    <input type="text" v-model="identityCard" onKeyUp="value=value.replace(/[\W]/g,'')" name="" id="" placeholder="请输入身份证号码">
                </div>
            </div>
        </div>

        <div class="niceckead">
            <van-button type="primary"  color="#3288FF"  @click="authentication()" block>认证</van-button>
            <!-- <div class="isok" @click="close()">确定</div> -->
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
import { Dialog } from 'vant';

import Vue from 'vue'
import api from '../../api/PublicInterface'
Vue.prototype.$api = api
export default {
    beforeCreate () {
        document.querySelector('body').setAttribute('style', 'background:#fff')
    },
    data(){
        return{
            name:'',//姓名
            identityCard:'',//身份证号
        }
    },
    methods:{
        // 认证
        authentication(){
            var reg = /^(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)|(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)$/
            if(this.name == ''){
                Toast('请填写姓名')
                return;
            }
            if(this.identityCard == ''){
                Toast('请填写身份证号')
                return;
            }
            if(!reg.test(this.identityCard)){
                Toast('填写身份证号有误')
                return;
            }
            Dialog.confirm({
                title: '提示',
                message: '确认好填写信息 是否提交认证',
            })
            .then(() => {
                // on confirm
                this.authenticationingtex()
            })
            .catch(() => {
                // on cancel
            });
        },
    
        authenticationingtex(){
            const data = {
                name: this.name,
                idNo:this.identityCard,
            }
            this.$api.authentication(data).then((res)=>{
                console.log(res)
                if(res.status == '0000'){
                    Toast('已提交')
                    setTimeout(()=>{
                        this.$router.back(-1)
                    },1000)
                }else{
                    Toast(res.describe)
                }
            })
        }

    }
}
</script>

<style scoped>
    .pages{
        width: 100%;
    }
    .header{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        box-sizing: border-box;
        background: #3288FF;
    }
    .header>.fls{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header>.fls>img{
        width: 100%;
        height: 100%;
    }
    .centern{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 17px;
        letter-spacing: 0px;
    }

    .an_bady{
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
        margin-top: 24px;
    }
    .icons{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .icons>img{
        width: 64px;
        height: 64px;
    }

    .titleibf{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 27px;
        color: #4F4F4F;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 13px;
        letter-spacing: 0px;
        margin-bottom: 40px;
    }
    .titleibf>img{
        width: 16px;
        height: 16px;
        margin-right: 8px;
    }
    .daistliays{
        width: 100%;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #F2F2F2;
    }

    .daistliays>.name{
        width: 30%;
        height: 100%;
        display: flex;
        align-items: center;
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 16px;
        letter-spacing: 0px;
    }
    .daistliays>.inpute{
        width: 70%;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .daistliays>.inpute>input{
        width: 100%;
        border: 0;
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 16px;
        letter-spacing: 0px;
    }
    .niceckead{
        width: 100%;
        margin-top: 40px;
        padding: 0 16px;
        box-sizing: border-box;
    }
    .isok{
        width: 100%;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background: #3288FF;
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 16px;
        letter-spacing: 0px;
    }

</style>